<script lang="ts" setup>

import { onMounted, ref, onBeforeMount } from 'vue';

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },

]


</script>
<template>
    <h3>基本信息</h3>
    <el-descriptions class="margin-top" title="" :column="3" label-width="140">
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理办公室地址：
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理办接待时间：
                </span>
            </template>
            １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理电话：
                </span>
            </template>
            河南省 郑州 河南省郑州市东明路127号
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理邮箱：
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理传真：
                </span>
            </template>
            １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    项目资料递交网址：
                </span>
            </template>
            河南省 郑州 河南省郑州市东明路127号
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    项目承接要求：
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理网址：
                </span>
            </template>
            １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理资质：
                </span>
            </template>
            １2410000415806735G
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    伦理简介：
                </span>
            </template>
            １2410000415806735G
        </el-descriptions-item>
    </el-descriptions>
    <h3>伦理要求</h3>
    <el-descriptions class="margin-top" title="" :column="3" label-width="140">
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    是否有遗传办递交经验：是
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    遗传办联系人： </span>
            </template>
            伦理办公室
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    联系人职位：
                </span>
            </template>
            资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    电话：0371-65587418
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    邮箱： </span>
            </template>
            伦理办公室
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    地址：
                </span>
            </template>
            资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    遗传办本院递交费用：
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    是否可以牵头递交遗传办：
                </span>
            </template>
            伦理办公室
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    人遗办申请所需时间：
                </span>
            </template>
            资料管理员
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    遗传办审核流程：
                </span>
            </template>
            伦理：河南省肿瘤医院
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    遗传办盖章流程：
                </span>
            </template>
            伦理办公室
        </el-descriptions-item>
    </el-descriptions>
    <h3>伦理成员</h3>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column prop="date" label="姓名"></el-table-column>
        <el-table-column prop="date" label="Email"></el-table-column>
        <el-table-column prop="date" label="电话"></el-table-column>
        <el-table-column prop="date" label="职责"></el-table-column>
    </el-table>

    <h3>审查及文件清单</h3>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div class="justify-between " style="padding: 10px 110px 0 60px;">
                    <div class="align-center">
                        <img src="@/assets/images/word.png" style="width: 20px;margin-right: 10px;" alt="">
                        文件清单.doc
                    </div>
                    <div class="align-center">
                        <span style="color: #0C9397;cursor: pointer;">查看</span>
                        <span style="color: #0C9397;cursor: pointer;margin-left: 10px;">下载</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="文件名" width="400">
            <template #default="scope">
                <div class="hospitalInfo">
                    <img src="@/assets/images/files.png" style="width: 20px;" alt="">


                </div>

            </template>
        </el-table-column>
        <el-table-column prop="date" label="上传时间">
            <template #default="scope">
                <p style="color: #0C9397;">试验分类:药代动力学/药效动力学试验</p>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">

                <!-- <el-button size="mini" style="color: #0C9397;" link> 合作咨询 </el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <h3>伦理会议</h3>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column prop="date" label="上会年月"></el-table-column>
        <el-table-column prop="date" label="上会日"></el-table-column>
        <el-table-column prop="date" label="备注"></el-table-column>
    </el-table>
    <h3>文件储存</h3>
    <el-descriptions class="margin-top" title="" :column="1" label-width="140">
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    文件存储收费：
                </span>
            </template>
            免费保存5年，5年之后一年2000
        </el-descriptions-item>
    </el-descriptions>
    
    <h3>费用支付</h3>
    <el-descriptions class="margin-top" title="" :column="3" label-width="140">
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    开票单位全称：
                </span>
            </template>
            台同草稿需要PI签字
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    单位账号：
                </span>
            </template>
            台同草稿需要PI签字
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    单位开户行：
                </span>
            </template>
            4周
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    开户支行：
                </span>
            </template>
            4周
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    清算行号（市内）：
                </span>
            </template>
            4周
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    清算行号（市外）：
                </span>
            </template>
            4周
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <span class="cell-item">
                    其他要求：
                </span>
            </template>
            4周
        </el-descriptions-item>
    </el-descriptions>



</template>
<style scoped lang="scss">
.containers {
    // background-color: #fff;
    height: calc(100% - 40px);
    margin: 20px auto;
}

button {
    width: 120px;
    height: 36px;
    background-color: #F5F5F5;
    font-size: 16px;
    margin-right: 11px;
    cursor: pointer;
    color: #333333;
}

.on {
    background-color: #0C9397;
    color: #fff;
}

.searchHeader {
    display: flex;
    margin: 20px 0;
    align-items: center;
    justify-content: space-between;

    .input {
        margin-right: 13px;
    }



}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}






.contentbox {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
}

.hospitalInfo {
    line-height: 1;
    color: #888888;
    font-size: 16px;
    align-items: center;
    display: flex;

    img {

        margin-right: 10px;
    }

    p {
        color: #333;
        margin-bottom: 10px;
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;

        li {
            width: 44px;
            height: 26px;
            background: #0C9397;
            border-radius: 3px;
            margin-right: 5px;
            color: #fff;
            text-align: center;
            line-height: 26px;
        }
    }
}

.tabList {
    display: flex;
    align-items: center;
    margin-top: 16px;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;

    li {
        cursor: pointer;
        margin-right: 60px;
        min-width: 64px;
    }

    .on {
        background-color: #0C9397;
        color: #fff;
        padding: 8px 15px;
        font-size: 16px;
    }
}

h3 {
    margin: 20px 0;
    font-size: 16px;
    color: #333333;
    position: relative;
    padding-left: 8px;
}

h3::before {
    position: absolute;
    clear: both;
    width: 3px;
    height: 16px;
    content: '';
    left: 0px;
    background-color: #0C9397;
}
</style>